<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="预约管理"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="main">
      <van-cell
        v-for="item in routerList"
        :key="item.name"
        :title="item.name"
        is-link
        @click="toRouter(item)"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, watch, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '/@/store'
import { getExpertDetail } from '/@/api/expert/list'
import { getUserInfo } from '../../../util/business-util'
export default defineComponent({
  setup() {
    const router = useRouter()
    const { commit, state } = useStore()
    let user = reactive<any>({})
    let userInfo = ref<any>({})
    onBeforeMount(async () => {
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
    })

    watch(
      () => userInfo.value,
      (val) => {
        getExpertDetail(val.id, val.tenantId).then((res) => {
          user = res.data.data
        })
      }
    )

    const routerList = ref([
      {
        path: '/notes-order',
        name: '预约记录',
      },
      {
        path: '/reserve-record',
        name: '发布记录',
      },
      {
        path: '/reserve-release',
        name: '预约发布',
      },
      // {
      //   path: '/records-consult',
      //   name: '咨询记录',
      // },
    ])

    const toRouter = (item: any) => {
      router.push({
        path: item.path,
        query: {
          id: user.id,
        },
      })
    }

    return {
      routerList,
      onClickLeft() {
        router.push({
          name: 'Me',
        })
      },
      toRouter,
    }
  },
})
</script>

<style lang="less" scoped>
.main {
  height: calc(100vh - 46px);
}
</style>
